<!--
 * @Author: chunlai
 * @Date: 2025-02-20 10:45:07
 * @LastEditTime: 2025-11-19 15:12:08
 * @LastEditors: minsheng_insurance_agency_zhoucl
 * @FilePath: \01.latest-short-insure\src\views\index\components\RecordWarnTip.vue
 * @Description: 投保记录警告提示
-->
<template>
  <div>
    <van-popup
      v-model="show"
      position="bottom"
      overlay-class="lay1_shark"
      round
    >
      <div class="modal-content">
        <div class="modal-header">
          <span>确认进入投保流程</span>
          <van-icon name="arrow-down" @click.stop="$emit('close')" />
        </div>
        <div class="modal-body">
          <div class="modal-body-conts">
            <p>尊敬的客户：</p>
            <p class="ti_2">
              您即将进入投保流程，请仔细阅读保险条款。本保险产品由
              <strong style="color: #ff8700">【{{ gysFullName }}】</strong>
              承保，由【民盛保险代理有限公司】提供销售和协助理赔等保险服务。
            </p>
            <p><br /></p>
            <p class="">
              投保前请您阅读<span class="notice-link" @click.stop="htmlPop"
                >《客户告知书》</span
              >
            </p>
          </div>
          <div class="modal-body-confirm">
            <p class="tips">
              点击“已阅读并同意”按钮，您在销售页面的操作将被依法记录和保存。
            </p>
            <div class="confirm-btn" @click.stop="$emit('sure')">
              已阅读并同意
            </div>
          </div>
        </div>
      </div>
    </van-popup>
    <van-popup
      v-model="showHtml"
      position="bottom"
      overlay-class="lay1_shark "
      :style="{ height: '90%' }"
      round
      :close-on-click-overlay="false"
      @click-overlay="closePop"
      @click-close-icon="closePop"
    >
      <div class="insure_prenotice_box">
        <div class="pop-title">客户告知书</div>
        <div class="pop-main">
          <div class="html_box" v-html="htmlConts"></div>
        </div>

        <div class="safe_area html-foot" @click="closePop">
          <div class="foot-btn">我已阅读并知悉</div>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  name: "RecordWarnTip",
  components: {},
  data() {
    return {
      show: false,
      showHtml: false,
      htmlConts: "",
    };
  },
  computed: {
    ...mapGetters({
      gysFullName: "dictionary/gysFullName",
      gysIntroHtml: "dictionary/gysIntroHtml",
    }),
  },
  watch: {},
  created() {},
  mounted() {},
  methods: {
    initModule() {
      this.show = true;
    },
    htmlPop() {
      let html = `<p>尊敬的客户：<p><br><p style=text-indent:2em>您好!现有民盛保险代理有限公司业务员为您办理投保手续。根据银行保险监管部门的规定，只有持《保险代理从业人员执业证书》的人员方可从事保险代理业务，本公司业务人员须出示《保险代理从业人员执业证书》，您可通过登录中国银保监会保险中介监管信息系统查询业务人员持证情况（http://iir.circ.gov.cn）。<p><br><p style=text-indent:2em>为了您的合法权益得到有效保护，按照监管规定的要求，本公司履行客户告知义务，现将有关告知如下，请您认真阅读确认知悉以下内容：<p><br><p><strong>一、请您了解代理公司基本情况</strong><p>（一）公司名称：民盛保险代理有限公司<p>（二）营业场所：安徽省合肥市庐阳区阜南路166号润安大厦A座12楼<p>（三）许可证名称及编号：201857000000800<p>（四）业务范围：全国区域内（港、澳、台除外）代理销售保险产品；代理收取保险费；代理相关保险业务的损失勘察和理赔；中国银保监会批准的其他业务。<p>（五）经营区域：在全国范围内（港、澳、台除外）<p>（六）联系方式：400-880-2177<p>（七）总公司名称: 民盛保险代理有限公司<p>（八）总公司营业场所：安徽省合肥市庐阳区阜南路166号润安大厦A座12楼<p><br><p><strong>二、请您了解承保公司基本情况</strong>${this.gysIntroHtml}<p><br><p><strong>三、请您客观评估自身的保险产品消费需求和缴费能力</strong><p>根据银行保险监管部门规定，保险销售人员不得通过不确定经济利益的形式推销保险产品，不得做出超出生效的书面保险合同责任范围的其他任何承诺。因此，请您客观地评估自身的保险产品消费能力和缴费能力，根据自身实际的风险保障需求和经济实力选购合适的保险产品。<p><br><p><strong>四、请您选择安全的保费缴纳方式</strong><p>建议您采用刷银行卡、银行转帐等非现金方式缴纳保费，以保证您的资金安全。如果您想选择其他缴费方式，可以与业务员联系。<p><br><p><strong>五、请您了解投诉渠道及纠纷解决方式</strong><p>我公司在客户办理投保、保全、理赔手续过程中提供指导和协助，为客户提供优质服务。对于您擅自委托销售人员代办超过我公司授权范围业务所产生的后果，我公司不承担任何经济和法律责任。如果您认为我公司服务人员存在销售误导或其他损害您合法权益的行为，您可拨打代理公司客服电话 400-880-2177或承保公司客服电话95542进行投诉。<p><br><p><strong>六、其他重要告知事项：</strong><p>我公司及董事、高级管理人员与承保公司不存在关联关系。<p><br><p><strong>七、请您了解保险产品、如实填写投保资料</strong><p>为维护您的合法权益，请您投保前认真阅读《产品条款》、《投保提示书》、《理赔须知》、《客户告知书》，并确认已了解保险条款的各项内容（特别是保险责任、免除保险人责任条款、合同解除条款、保险责任是否有等待期、免赔额、犹豫期、退保等关键信息），并根据自身状况选择合适的保险金额、保险期间、交费期限、交费金额之后再签署投保单。任何与投保单或保险合同条款内容不符的说明及承诺均无效。<p>依据《保险法》，您作为投保人有如实告知义务。为了有效保障自身权益，您在投保时所录入的内容必须属实；依法保护客户权益是我公司的神圣责任，更需要您的积极参与和认真配合。`;
      this.htmlConts = html;
      this.showHtml = true;
    },
    closePop() {
      this.showHtml = false;
    },
  },
};
</script>
<style lang="less" scoped>
.modal-content {
  width: 100%;
  background-color: #ffffff;
  .modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 50px;
    color: #2c2d30;
    font-size: 16px;
    padding: 0 15px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  }
  .modal-body {
    color: #6b7179;
    padding: 20px 15px;
    &-conts {
      line-height: 1.5;
      .notice-link {
        padding: 0 4px;
        color: #236dff;
      }
    }
    &-confirm {
      margin-top: 20px;
      padding-bottom: 10px;
      .tips {
        color: #ff8700;
        line-height: 1.5;
        font-weight: 600;
        margin-bottom: 30px;
      }
      .confirm-btn {
        width: 100%;
        height: 40px;
        line-height: 40px;
        text-align: center;
        font-size: 16px;
        color: #ffffff;
        border-radius: 5px;
        background-color: #0d6eff;
      }
    }
  }
}
.insure_prenotice_box {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  background-color: #f5f5f9;
  .pop-title {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 50px;
    line-height: 50px;
    font-size: 16px;
    font-weight: 600;
    color: #2c2d30;
    text-align: center;
    background-color: #ffffff;
  }

  .pop-main {
    width: 100%;
    height: calc(100% - 110px);
    padding: 10px 12px;

    .html_box {
      height: 100%;
      border-radius: 10px;
      padding: 15px 16px;
      line-height: 18.56px;
      background-color: #fff;
      overflow-y: auto;
      font-size: 14px;
      font-weight: 400;
      color: rgba(87, 87, 87, 1);
    }
  }
  .html-foot {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 60px;
    padding: 0 12px;
    background-color: #ffffff;
    .foot-btn {
      width: 100%;
      height: 40px;
      line-height: 40px;
      text-align: center;
      font-size: 16px;
      color: #ffffff;
      border-radius: 40px;
      background-color: #0d6eff;
    }
  }
}
</style>
